/* ==================================================
   BARRE DE RECHERCHE (page cours.html)
================================================== */

.recherche {
    position: relative;
    max-width: 600px;
    margin: 28px auto 0;
    text-align: left;
}

.recherche_champ {
    width: 100%;
    padding: 15px 20px 15px 52px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #172033;

    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23176b38' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 20px center;

    border: 2px solid #d7e0ea;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(20, 45, 80, 0.08);

    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.recherche_champ::placeholder {
    color: #8a95a6;
}

.recherche_champ:focus {
    outline: none;
    border-color: #176b38;
    box-shadow: 0 6px 20px rgba(23, 107, 56, 0.18);
}

/* Liste des résultats */

.recherche_resultats {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;

    list-style: none;
    max-height: 380px;
    overflow-y: auto;

    background-color: #ffffff;
    border: 1px solid #e5ebf2;
    border-radius: 14px;
    box-shadow: 0 14px 35px rgba(20, 45, 80, 0.15);
}

.recherche_resultats[hidden] {
    display: none;
}

.recherche_resultats a {
    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 12px 20px;
    border-bottom: 1px solid #f0f3f7;

    text-decoration: none;
    transition: background-color 0.2s ease;
}

.recherche_resultats li:last-child a {
    border-bottom: none;
}

.recherche_resultats a:hover,
.recherche_resultats a:focus {
    background-color: #eaf5ed;
}

.recherche_titre {
    color: #102d55;
    font-size: 15px;
    font-weight: bold;
}

.recherche_info {
    color: #687386;
    font-size: 13px;
}

.recherche_vide {
    padding: 16px 20px;
    color: #687386;
    font-size: 14px;
}